<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpng.pngtree.com%2Fthumb_back%2Ffw800%2Fbackground%2F20190222%2Fourmid%2Fpngtree-fog-color-gradient-ppt-background-gradientppt-gradient-backgroundppt-image_60627.jpg&refer=http%3A%2F%2Fpng.pngtree.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661740220&t=2f1ccea28a5e45d89fb4ade332d70ea5);
            background-size: 100% 100%;
        }

        section {
            width: 300px;
            height: 300px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            display: flex;
            overflow: hidden;
            display: flex;
        }
        section img {
            height: 100%;
            display: block;
            transition: 1S;
        }
        p {
            align-self: center;
            font-size: 25px;
            height: 50px;
            line-height: 50px;
            width: 30px;
            text-align: center;
            background: rgba(146, 146, 146, 0.4);
            color: azure;
        }
        #left {
            position: absolute;
            left: 0;
        }
        #right {
            position: absolute;
            right: 0;
        }
        section ul{
            width: 100%;
            position: absolute;
            bottom: 0;
            display: flex;
            left: 0;
            justify-content: space-evenly;
        }
        section ul li{
            list-style: none;
            width: 16px;
            height: 16px;
            border-radius: 8px;
            background: rgb(158, 158, 146);
            opacity: 0.8;
        }
        section ul .active{
            background: red;
            width: 32px;
        }
    </style>
</head>

<body>
    <section id="box">
        <img src="../images/01.png" alt="" id="img1">
        <img src="../images/02.png" alt="" id="img2">
        <img src="../images/03.png" alt="" id="img3">
        <img src="../images/04.png" alt="" id="img4">
        <img src="../images/05.png" alt="" id="img5">
        <img src="../images/06.png" alt="" id="img6">
        <p id="left">&lt;</p>
        <p id="right">&gt;</p>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <script>
        //获取左右按钮
        var left = document.getElementById("left")
        var right = document.getElementById("right")
        var box = document.getElementById("box")
        // var img1 = document.getElementById("img1")
        // var img2 = document.getElementById("img2")
        // var img3 = document.getElementById("img3")
        // var img4 = document.getElementById("img4")
        // var img5 = document.getElementById("img5")
        // var img6 = document.getElementById("img6")
        var img = document.getElementsByTagName("img")
        var allLi = document.querySelectorAll("section ul li")

        //tmp 位移距离  num 计数器编号 
        var tmp = 0
        var num
        //左右键(到最后一张锁住)
        left.onclick = function () {
            tmp += 300
            // if (tmp > 0) {
            //     tmp = 0
            // }
            fn()
        }
        right.onclick = function () {
            tmp -= 300
            // if (tmp < -1500) {
            //     tmp = -1500
            // }
            fn()
        }
        //圆点点击关联
        for(let i = 0;i < allLi.length;i++){
            allLi[i].onclick = function(){
                //圆点配合图片位置
                tmp = i * -300
                fn()
            }
        }
        //默认执行
        window.onload = function () {
            auto()
        }
        //进入轮播图停止
        box.onmouseenter = function () {
            clearInterval(num)
        }
        //出轮播图继续播放
        box.onmouseleave = function () {
            auto()
        }
        //位移 (配合自动轮播,到最后一张自动回滚)
        function fn() {
            if (tmp === -300 * img.length) {
                tmp = 0
                // for(var i = 0;i < img.length;i++){
                //     img[i].style.transition = "0s"
                // }
            }else if(tmp === 300){
                tmp = -1500
            }
            console.log(tmp);
            for (var i = 0; i < img.length; i++) {
                img[i].style.transform = `translate(${tmp}px)`
            }
            //res 是当前在第几张图 
            var res = Math.abs(tmp / 300)
            //排他
            for(var i = 0;i < allLi.length;i++){
                allLi[i].className = ""
            }
            //给当前图片的圆点样式
            allLi[res].className = "active"
        }
        
        //自动轮播
        function auto() {
            num = setInterval(function () {
                tmp -= 300
                fn()
            }, 2488)
        }

    </script>
</body>

</html>